layui.use(['form', 'table','layuimini','element'], function () {
    var $ = layui.jquery,
        form = layui.form,
        table = layui.table,
        layuimini = layui.layuimini;

    /**
     * 初始化表单，要加上，不然刷新部分组件可能会不加载
     */
    form.render();

    var BoDynamicImg = {
        id: 'BoDynamicImgTable'
    };

    var column = [
        [
            {type: 'numbers'},
            {field: 'thumUrl', title: '图片/视频', align: 'center',
                templet: function (object) {
                    var img = '';
                    if('0' == object.fileType){
                        img = '<img src="/dynamic/' + object.thumUrl +
                            '" lay-event="previewImg"' + ' style="cursor: pointer;max-width:100px; max-height:100px;"';
                    }else if('1' == object.fileType){
                        img = '<video lay-event="previewImg" style="cursor: pointer;max-width:100px; max-height:100px;"><source src="/dynamic/'+ object.thumUrl +'" type="video/mp4">您的浏览器不支持视频。</video>';
                    }
                    return img;
                }
            },
            {field: 'fileType', title: '文件类型', align: 'center',
                templet: function (object) {
                    if('0' == object.fileType){
                        return '<span class="layui-badge layui-bg-blue">图片</span>';
                    }else if('1' == object.fileType){
                        return '<span class="layui-badge layui-bg-black">视频</span>';
                    }
                }
            },
            {field: 'onePhoto', title: '视频的第一帧路径', align: 'center',
                templet: function (object) {
                    var img = '';
                    if('0' == object.fileType){
                        img = '<span style="color: rgba(0,124,0,0.53)">无</span>';
                    }else if('1' == object.fileType){
                        img = '<img src="/dynamic/' + object.onePhoto +
                            '" lay-event="onePhotoPreview"' + ' style="cursor: pointer;max-width:100px; max-height:100px;"';
                    }
                    return img;
                }
            },
            {field: 'content', title: '动态内容', align: 'center',
                templet: function (object) {
                    if('' == object.content || null == object.content || undefined == object.content){
                        return '<span style="color: red">动态已删除</span>';
                    }else{
                        return object.content;
                    }
                }
            },
            {field: 'type', title: '动态类型', align: 'center',
                templet: function (object) {
                    if(object.type == '' || object.type == null || object.type == undefined){
                        return '<span style="color: red">动态已删除</span>';
                    }
                    if('0' == object.type){
                        return '<span class="layui-badge layui-bg-blue">恋爱清单</span>';
                    }else if('1' == object.type){
                        return '<span class="layui-badge layui-bg-green">约看书</span>';
                    } else if('2' == object.type){
                        return '<span class="layui-badge layui-bg-orange">发起恋爱清单</span>';
                    } else if('3' == object.type){
                        return '<span class="layui-badge layui-bg-cyan">发起约看书</span>';
                    } else if('4' == object.type){
                        return '<span class="layui-badge layui-bg-black">其他</span>';
                    }
                }
            },
            {field: 'userName', title: '发起人', align: 'center',
                templet: function (object) {
                    if(object.userName == '' || object.userName == null || object.userName == undefined){
                        return '<span style="color: red">动态已删除</span>';
                    }else{
                        return object.userName;
                    }
                }
            },
            {field: 'createDate', title: '时间', minWidth: 120, align: 'center'},
            {templet: '#stateBtn', width: 140, align: 'center', title: '操作'}
        ]
    ];

    table.render({
        elem: '#' + BoDynamicImg.id,
        url: '/web/boDynamicImg/list',
        toolbar: '#toolbarBtn',
        defaultToolbar: ['filter', 'exports', 'print'],
        cols: column,
        limits: [10, 15, 20, 25, 50, 100],
        limit: 15,
        page: true
    });

    // 监听搜索操作
    $("#data-search-btn").on('click', function () {

        //获取搜索条件
        var type = $("#search_type").val();

        //封装
        var dataObject = {};
        dataObject['type'] = type;
        var result = JSON.stringify(dataObject);

        //执行搜索重载
        table.reload(BoDynamicImg.id, {
            page: {
                curr: 1
            }
            , where: {
                searchParams: result
            }
        }, 'data');

        return false;
    });

    // 监听重置操作
    $("#data-reset-btn").on('click', function () {

        //初始化
        $("#search_type").val("-1");

        form.render();

        //封装
        var dataObject = {};
        dataObject['type'] = "-1";
        var result = JSON.stringify(dataObject);

        //执行搜索重载
        table.reload(BoDynamicImg.id, {
            page: {
                curr: 1
            }
            , where: {
                searchParams: result
            }
        }, 'data');

        return false;
    });

    /**
     * 点击删除按钮
     * @param id
     */
    BoDynamicImg.delete = function(id){
        layer.open({
            title: '删除动态'
            ,content: '是否确定删除该动态？'
            ,icon: 3
            ,btn: ['确定', '取消']
            ,yes: function(index, layero){
                layer.close(index);
                var indexLoad = layer.load(2);
                var url = '/web/boDynamicImg/delete';
                $.post(url, {id: id}, function(data){
                    layer.close(indexLoad);
                    if(data.state == "200"){
                        layer.msg(data.message, {icon: 1});
                        table.reload(BoDynamicImg.id);
                    }else{
                        layer.msg(data.message, {icon: 2});
                    }
                })
            }
        });

        return false;
    };

    //照片预览
    BoDynamicImg.previewImg = function(data) {

        var width = (window.screen.width - 400) + 'px';
        var height = (window.screen.height - 300) + 'px';

        var imgHtml = "";

        if(data.fileType == '0'){
            imgHtml = "<img src='/dynamic/" + data.thumUrl + "' style='min-width:100px; min-height:100px;max-width:" + width + ";max-height:" + height + ";'/>";
        }else{
            imgHtml = '<video controls autoplay style="cursor: pointer;width:600px; height:800px;"><source src="/dynamic/'+ data.thumUrl +'" type="video/mp4">您的浏览器不支持视频。</video>'
        }

        //捕获页
        var index = layer.open({
            type: 1,
            title: false, //不显示标题
            shadeClose: true,
            skin: 'previewImg-class', //透明
            area: ['auto', 'auto'],
            content: imgHtml //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
        $(window).on("resize", function () {
            layer.full(index);
        });
    };

    //第一帧图片预览
    BoDynamicImg.onePhotoPreview = function(data) {

        var width = (window.screen.width - 400) + 'px';
        var height = (window.screen.height - 300) + 'px';

        var imgHtml = "<img src='/dynamic/" + data.onePhoto + "' style='min-width:100px; min-height:100px;max-width:" + width + ";max-height:" + height + ";'/>";

        //捕获页
        var index = layer.open({
            type: 1,
            title: false, //不显示标题
            shadeClose: true,
            skin: 'previewImg-class', //透明
            area: ['auto', 'auto'],
            content: imgHtml //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
        $(window).on("resize", function () {
            layer.full(index);
        });
    };


    //监听表格复选框选择
    // table.on('checkbox(currentTableFilter)', function (obj) {
    //     console.log(obj)
    // });

    //监听工具条
    table.on('tool(' + BoDynamicImg.id + ')', function (obj) {
        var data = obj.data;
        var layEvent = obj.event;

        if (layEvent === 'delete') {
            BoDynamicImg.delete(data.id);
        } else if(layEvent === 'previewImg'){
            BoDynamicImg.previewImg(data);
        } else if(layEvent === 'onePhotoPreview'){
            BoDynamicImg.onePhotoPreview(data);
        }
    });

});